<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webToBridge</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script type="text/javascript"
            src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        var socket;

        $(document).ready(function () {
            //要写namespace:/channel_A
            socket = io.connect('ws://127.0.0.1:8000/channel_A');
            // socket.emit('operation', {'topic': '/cmd_vel'})
            //测试1连接,测试2:Publishing
            socket.on('connect', function () {
                console.log('connect');
                socket.emit('operation', [cmdVel, twist])
                console.log('operation');
                socket.emit('operationListener', [listener])
                console.log('operationListener');
            })


            // Publishing a Topic
            // ------------------
            // Connect to ROS.
            var ros = new ROSLIB.Ros();

            var cmdVel = new ROSLIB.Topic({
                ros: ros,
                name: '/cmd_vel',
                messageType: 'geometry_msgs/Twist'
            });

            var twist = new ROSLIB.Message({
                linear: {
                    x: 0.1,
                    y: 0.2,
                    z: 0.3
                },
                angular: {
                    x: -0.1,
                    y: -0.2,
                    z: -0.3
                }
            });

            // Subscribing to a Topic
            // ----------------------

            var listener = new ROSLIB.Topic({
                ros: ros,
                name: '/listener',
                messageType: 'geometry_msgs/Twist'
            });

            //测试3:Subscribing FlaskServer/send_to_front返回的数据
            socket.on('front', function (data) {
                console.log('front');
                console.log(data)
                console.log(typeof data)
            })
        })


    </script>
</head>
<body>
<h1>webToBridge</h1>
</body>
</html>